<template>
    <div style="padding-bottom:10px" :class="className" :id="id" :style="{height:height,width:width}"></div>       
</template>
<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');

require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'barPercent',
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        TableData: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            piedata: []
        };
    },
    watch: {
        TableData: {
            handler(val, oldVal) {
                if (val) {
                    this.setOptions();
                }
            },
            deep: true
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id));
            this.setOptions()
        },
        setOptions() {
            this.chart.setOption({
                color: ['#7BC0F2', '#2EC7C9', '#FFB980', '#B6A2DE', '#D87A80'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 80,
                    bottom: 20,
                    // x: 'center',
                    // y: '5%',
                    data: ['正常', '迟到', '早退', '缺卡', '未绑卡'],
                    icon: 'circle'
                },
                series: [
                    {
                        name: '考勤统计',
                        type: 'pie',
                        radius: '63%',
                        center: ['50%', '60%'],
                        avoidLabelOverlap: true,
                        label: {
                            normal: {
                                show: false
                                // formatter: '{b}：{c}人，占比：{d}%'
                                // formatter: '{b}：{c}人'
                                // position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.TableData
                    }
                ]
            });
        }
    }
};
</script>
